<template>
  <div class="container">
    <van-nav-bar
      title="个人资料"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    ></van-nav-bar>
    <br />
    <ValidationObserver ref="observer" v-slot="{ invalid }" tag="form">
      <van-cell-group>
        <ValidationProvider
          :rules="{
            min: 4,
            max: 20
          }"
          v-slot="{ errors }"
          name="用户名"
        >
          <van-field
            v-model="username"
            label="用户名"
            placeholder="请输入用户名"
            clearable
            :error-message="errors[0]"
            autofocus
          ></van-field>
        </ValidationProvider>

        <van-field
          readonly
          clickable
          label="性别"
          :value="gender"
          placeholder="请选择"
          @click="showGenderPicker = true"
        ></van-field>

        <van-field
                readonly
                clickable
                label="所在地区"
                :value="city"
                placeholder="请选择"
                @click="showCityPicker = true"
        ></van-field>
        <van-field
                readonly
                clickable
                label="出生日期"
                :value="birthday"
                placeholder="请选择"
                @click="showDatePicker = true"
        ></van-field>
      </van-cell-group>
    </ValidationObserver>

    <!--性别选择器-->
    <van-popup v-model="showGenderPicker" position="bottom">
      <van-picker
        :columns="genderColumns"
        show-toolbar
        title="请选择"
        @cancel="showGenderPicker = false"
        @confirm="onGenderConfirm"
      ></van-picker>
    </van-popup>

    <!--城市选择器-->
    <van-popup v-model="showCityPicker" position="bottom">
      <van-picker
              :columns="cityColumns"
              show-toolbar
              title="请选择"
              @cancel="showCityPicker = false"
              @confirm="onCityConfirm"
              @change="onCityChange"
             ></van-picker>
    </van-popup>

    <!--日期选择器-->
    <van-popup v-model="showDatePicker" position="bottom">
      <van-datetime-picker
              v-model="currentDate"
              type="date"
              :min-date="minDate"
              :max-date="maxDate"
              show-toolbar
              title="请选择"
              :formatter="formatDatePicker"
              @cancel="showDatePicker = false"
              @confirm="onDateConfirm"></van-datetime-picker>
    </van-popup>

  </div>
</template>

<script>
  import cityData from '@/assets/province'
  export default {
    name: "Profile",
    data() {
      return {
        username: "",
        gender: "",
        city:"",
        birthday:"",
        currentDate:null,
        minDate: null,
        maxDate: null,
        showDatePicker: false,
        showCityPicker: false,
        cityStrList:{},
        cityColumns: [],
        showGenderPicker: false,
        genderColumns: ["保密", "男", "女"]
      };
    },
    mounted(){
      this.formatCityData();
      this.initDatePicker();

    },
    methods: {
      //初始化化时间选择器
      initDatePicker(){
        let now = new Date().valueOf();
        let min = now - 100 * 365 * 24 * 3600 *1000;

        this.currentDate = new Date();
        this.maxDate = new Date();
        this.minDate = new Date(min);
      },
      //格式化时间选择器
      formatDatePicker(type, value) {
        if (type === 'year') {
          return `${value}年`;
        } else if (type === 'month') {
          return `${value}月`
        }else if (type === 'day') {
          return `${value}日`
        }

        return value;
      },
      //格式化城市数据
      formatCityData(){
       for(let item of cityData){
         let cities = [];
         for (let children of item.children){
           cities.push(children.label)
         }
         this.cityStrList[item.label] = cities;
       }
        this.cityColumns = [{values: Object.keys(this.cityStrList)}, {values: this.cityStrList['北京']}];
      },
      //导航左侧点击
      onClickLeft() {
        this.$router.back(-1);
      },
      //更换性别
      onGenderConfirm(value) {
        this.gender = value;
        this.showGenderPicker = false;
      },
      //更换城市
      onCityConfirm(values) {
        this.city = values.toString();
        this.showCityPicker = false;
      },
      //列表省市联动
      onCityChange(picker, values) {
        picker.setColumnValues(1, this.cityStrList[values[0]]);
      },
      //更换日期
      onDateConfirm(date) {
        this.birthday = date.toJSON().substr(0, 10);
        this.showDatePicker = false;
      },
    }
  };
</script>

<style scoped></style>
